import React, { FC } from 'react'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
  SmileOutline,
} from 'antd-mobile-icons'
import { useLocation } from 'react-router-dom'

import Home from '../views/Main/Home'
import Classify from '../views/Main/Classify'
import Find from '../views/Main/Find'
import Mine from '../views/Main/Mine'
import { useComment } from '../hooks/common'


const MyFooter: FC = () => {
  const tabs = [
    {
      path: '/main/home',
      component: <Home />,
      title: '首页',
      icon: <SmileOutline />
    },
    {
      path: '/main/classify',
      component: <Classify />,
      title: '分类',
      icon: <UnorderedListOutline />,
    },
    {
      path: '/main/find',
      component: <Find />,
      title: '发现',
      icon: <MessageFill />,
      hot: true
    },
    {
      path: '/main/mine',
      component: <Mine />,
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  const { gotoWhere } = useComment()
  const { pathname } = useLocation()


  return (
    <div style={{ position: 'fixed', bottom: '-4px', left: 0, width: '100%', borderTop: "1px solid #ddd", backgroundColor: '#fff' }}>
      <TabBar safeArea onChange={gotoWhere} activeKey={pathname} >
        {tabs.map(item => (
          <TabBar.Item badge={item.hot ? 6 : null} key={item.path} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  )
}

export default MyFooter
